<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>基本列表</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<!-- 第一种写法(不推荐) -->
			<!-- <li v-for="p of persons" :key="p.id">
				{{p.name}}-{{p.age}}
			</li> -->

			<!-- 第二种写法(推荐) -->
			<!-- <li v-for="(a,b,c) of persons">
						// 输出
						// { "id": "001", "name": "张三", "age": 18 } -0 - undefined
						// { "id": "002", "name": "李四", "age": 19 } -1 - undefined
						// { "id": "003", "name": "王五", "age": 20 } -2 - undefined
						// 由此推论:v-for可接收两个参数: 数据 和 索引
				{{a}} -{{b}} -{{c}}
			</li> -->
			<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

		<!-- 遍历对象 -->
		<h2>汽车信息（遍历对象）</h2>
		<ul>
			<!-- 
				输出:
					奥迪A8-name
					70万-price
					黑色-color
					由此推论:对象先收到value,再收到key
			 -->
			<!-- <li v-for="(a,b) of car">
				{{a}}-{{b}}
			</li> -->

			<li v-for="(value,key) of car" :key="key">
				{{key}}-{{value}}
			</li>
		</ul>

		<!-- 遍历字符串 -->
		<h2>测试遍历字符串（用得少）</h2>
		<ul>
			<!-- 
				结果:
					h-0
					e-1
					l-2
					l-3
					o-4
					由此推理:字符串可以接受两个值:数值和索引
			 -->
			<!-- <li v-for="(a,b) of str">
				{{a}}-{{b}}
			</li> -->

			<li v-for="(char,index) of str" :key="index">
				{{char}}-{{index}}
			</li>
		</ul>

		<!-- 遍历指定次数 -->
		<h2>测试遍历指定次数（用得少）</h2>
		<ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el: '#root',
			data: {
				// js中有顺序的数据使用数组存储 id必要
				persons: [
					{ id: '001', name: '张三', age: 18 },
					{ id: '002', name: '李四', age: 19 },
					{ id: '003', name: '王五', age: 20 }
				],
				car: {
					name: '奥迪A8',
					price: '70万',
					color: '黑色'
				},
				str: 'hello'
			}
		})
	</script>

</html>